var vm;
Vue.prototype.$ajax = $.ajax
var BUS = new Vue();
/*
 * 全局ajax函数
 * 外加login
*/
const settingObj = {
	isWaterfallIndex: -1, // 瀑布流位置
	isWaterfallArr: [], // 瀑布流位置
	waterfallScrollTop: 0, //瀑布流滚动位置
	pageNum: 3, // 瀑布流页数
	elScrollTop: 0,
	catalogId: '',
}
function _ajax(obj = {}, callBack) {
	$('#loading').fadeIn(300)
	$.ajax({
		type: obj.type || 'GET',
		url: 'http://www.52doutu.net/52doutu/' + obj.url,
		data: obj.data,
		success: (msg) => {
			let res;
			$('#loading').fadeOut()
			if (msg.code === 0) {
				res = msg.result.list
				if (typeof callBack === 'function') {
					callBack(res)
				}
			} else {
				alert(msg.msg)
				if (typeof callBack === 'function') {
					callBack(msg)
				}
			}
		},
		error: (err) => {
			$('#loading').fadeOut()
		}
	})
}

/*
 * img 瀑布流函数
*/
function waterfallImg(_this, boxEl) {
	if (!_this) {
		return
	}
	let box = $('.waterfall-list');// $(boxEl)
	// box.hide()
	let boxWidth = box.eq(0).outerWidth();
    let num = 8; // Math.floor($(window).width()/boxWidth);
    let boxArr=[];
    if (settingObj.isWaterfallArr.length > 0) {
    	boxArr = settingObj.isWaterfallArr
    }
    box.each(function(index,value){

        let boxHeight = box.eq(index).height() + 10;
        if (index < settingObj.isWaterfallIndex) {
        	return
        }
        if(index<num){
            boxArr[index]= boxHeight;
        }else{
           	let minboxHeight = Math.min.apply(null,boxArr);
            let minboxIndex = $.inArray(minboxHeight,boxArr);
            $(value).css({
                "position":"absolute",
                "top":minboxHeight,
                "left":box.eq(minboxIndex).position().left
            });
            boxArr[minboxIndex]+=box.eq(index).height() + 10;
        }
        $(value).fadeIn(300)
    })
    window.sessionStorage.setItem('isWaterfall', Math.max.apply(null,boxArr))
    settingObj.isWaterfallArr = boxArr
    settingObj.isWaterfallIndex = box.length
}

// 
{
	window.onresize = function() {
		settingObj.isWaterfallIndex = -1;
		settingObj.isWaterfallArr = [];
		waterfallImg(true)
	}
	let feedback = {
		template: '#feedback',
		data() {
			return {
				isNotice: false,
				textareaData: '',
				authCodeData: {},
				code: ''
			}
		},
		computed: {
			codeUrl() {
				return 'data:image/png;base64,' + this.authCodeData.authCode
			}
		},
		methods: {
			feedbackPost() {
				if(this.textareaData === '') {
					alert('输入不能为空')
					return
				}
				_ajax({
					url: 'common/feedback/save',
					type: 'POST',
					data: {content: this.textareaData, authCode: this.code, token: this.authCodeData.token}
				}, (msg) => {
					if (msg.code === 24) {
						this.baseAjax()
						return
					}
					this.isNotice = false
					this.textareaData = ''
					this.code = ''
					this.baseAjax()

					alert('保存成功')
				})
			},
			baseAjax() {
				this.$ajax({
					type: 'GET',
					url: 'http://www.52doutu.net/52doutu/common/captcha/getCode',
					success: (res) => {
						this.authCodeData = res
					},
					error: (err) => {
						alert(err)
					}
				})
			}
		},
		created() {
			BUS.$on('navShowFeedback',() => {
				this.baseAjax()
				this.isNotice = true
			})
		},
		mounted() {

			// var code = this;
			// $.ajax()
			// this.$ajax({
			// 	type: 'GET',
			// 	url: 'http://www.52doutu.net/52doutu/common/captcha/getCode',
			// 	success: (res) => {
			// 		this.authCodeData = res
			// 	},
			// 	error: (err) => {
			// 		alert(err)
			// 	}
			// })
		}
	}

	let notice = {
		template: '#notice',
		data() {
			return {
				isNotice: false,
				noticeData: []
			}
		},
		methods: {
			closeBox() {
				this.isNotice = false
			}
		},
		mounted() {
			_ajax({
				url: 'common/updateLog/list'
			}, (msg) => {
				this.noticeData = msg
			})
		},
		created() {
			BUS.$on('navShowNotice',() => {
				this.isNotice = true
			})
		}
	}
	let imgBox = {
		template: '#img-box',
		props: {
			num: {
				type: Number,
				default: 0
			},
			dataList: Array
		},
		computed: {
			imgIndex() {
				let url
				if (this.dataList.length > 0) {
					url = this.dataList[this.num].url
				}
				return url
			}
		},
		methods: {
			toggle() {
				this.$emit('toggle')
			},
			prevClick() {
				if (this.num <= 0) {
					this.num = 0
					return
				}
				this.num--
			},
			nextClick() {
				if(this.num == (this.dataList.length - 1)) {
					this.num = this.dataList.length - 1
					return
				}
				this.num++
			}
		},
		updated() {
			var imgHeight,
				imgWidth;
			$('.img-wrap').each((index, el) => {
				imgHeight = $(el).height()
				imgWidth = $(el).width()
				$(el).css({
					'margin-top': -(imgHeight / 2) + 'px',
					'margin-left': -(imgWidth / 2) + 'px'
				})
			})
		}
	}
	/***************************
			瀑布流
	****************************/
	let waterfall = {
		template: '#waterfall',
		props: {
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			down: {
				type: Object,
				default: function () {
					return {
						isTime: false
					}
				}
			}
		},
		data() {
			return {
				num: '',
				imgWidth: ''
			}
		},
		methods: {
			clickImg(url,index) {
				this.num = url.id
				this.$emit("clicknum", index)
			},
			toggle() {
				this.$emit('toggle')
			}
		},
		updated() {
			if (this.down.isTime) {
				setTimeout(() => {
					waterfallImg(this, $('.waterfall-list'))
					$('#waterfall-hook').css('opacity', 1)
					this.down.isTime = false
				}, 1000)
			} else {
				waterfallImg(this, $('.waterfall-list'))
			}
		},
		mounted() {
			this.imgWidth = ($($('.img-lt_box')[0]).outerWidth() - 20) / 8
		}
	}
	Vue.component('waterfall', waterfall)
	/*
	 * 导航栏
	*/
	let slideBar = {
		template: '#slide_bar',
		props: {
			navListData: Array
		},
		data() {
			return {
				onClass: -1
			}
		},
		methods: {
			navbarClick(obj, i) {
				this.onClass = i;
				this.$emit('navbarclick', obj.id)
				
			},
			navbarClickIndex() {
				this.onClass = -1;
				this.$emit('navbarclickindex')
			}
		}
	}

	/*
	 * 弹出框
	*/
	let dialog = {
		template: '#dialog',
		data() {
			return {
				title: '提示',
				content: 'nihao nihao nihao '
			}
		}
	}

	let search = {
		template: '#search',
		data() {
			return {
				searchData: ''
			}
		},
		methods: {
			searchClick(ks) {
				_ajax({
					url: 'doutu/pictureTag/listByTagName',
					data: {tagName: ks}
				}, (msg) => {
					this.$emit('searchclick', msg)
					// this.searchDateList = msg
				})
			}
		}
	}

	vm = new Vue({
		el: '#app',
		data: {
			dataList: [],
			navData: [],
			searchData: '',
			searchDateList: [],
			num: 0,
			down: {isTime: false}
		},
		methods: {
			imgToggle() {
				this.num = 0
			},
			clicknum(num) {
				this.num = num
			},
			navbarClick(id) {
				$('.bg_disabled').show()
				settingObj.catalogId = id
				_ajax({
					url: 'doutu/picture/list',
					data: {catalogId: id, pageNum: 1,pageSize: 32}
				}, (msg) => {
					this.settingInit()
					this.dataList = msg
				})
				this.down.isTime = true
				setTimeout(function() {
					$('.bg_disabled').hide()
				}, 3000)
			},
			searchClick(msg) { 
				settingObj.catalogId = ''
				this.dataList = msg
				this.settingInit()
				this.down.isTime = true
			},
			settingInit() {
				settingObj.isWaterfallIndex = -1;
				settingObj.isWaterfallArr = [];
				settingObj.waterfallScrollTop = 0
				$('#waterfall-hook').css({
					'transform': 'translate3d(0,0,0)'
				})
				$('#waterfall-hook').css('opacity', 0)
			},
			navbarClickIndex() {
				$('.bg_disabled').show()
				settingObj.catalogId = ''
				_ajax({
					url: 'doutu/picture/listIndex',
					data: {pageNum: 1,pageSize: 32}
				}, (msg) => {
					this.settingInit()
					this.dataList = msg
				})
				this.down.isTime = true
				setTimeout(function() {
					$('.bg_disabled').hide()
				}, 3000)
			},
			navShowNotice() {
				BUS.$emit('navShowNotice','')
			},
			navShowFeedback() {
				BUS.$emit('navShowFeedback','')
			}
		},
		computed: {
			imgShow() {
				return this.num == '' ? false : true
			}
		},
		mounted() {
			$.ajax({
				type: 'GET',
				url: 'http://www.52doutu.net/52doutu/doutu/catalog/list',
				data: {},
				success: (msg) => {
					if (msg.code === 0) {
						this.navData = msg.result
					}
				},
				error: (err) => {
				}
			})
		},
		components: {
			// waterfall,
			imgBox,
			slideBar,
			notice,
			feedback,
			search,
			// dialog n
		}
	})

	
	

	$(function() {
		$('.up').on('click', function() {
			$('#waterfall-hook').css({
				transform: 'translate3d(0.1px,0.1px,0.1px)'
			})
		})
		// $('.banquan').mouseleave(function() {
		// 	$('.copy-box').removeClass('copyon')

		// })
		// $('.banquan').mouseenter(function() {
		// 	$('.copy-box').addClass('copyon')

		// })
		var isCopyShow = false;
		$('.copyright').hide()
		$('.banquan').on('click', function() {
			$('.copyright').show()
			if (isCopyShow) {
				$('.copy-box').removeClass('copyon')
				$('.copyright').hide()
				isCopyShow = false
			} else {
				$('.copy-box').addClass('copyon')
				$('.copyright').show()
				isCopyShow = true
			}
			

		})


		// window.onresize = function() {
		// 	waterfallImg()
		// }
		var oDiv = document.getElementById('slide-hook');
		var waterfallHook = document.getElementById('waterfall-hook');
		oDiv.onmousewheel = fn;
		
		if (oDiv.addEventListener) {
			oDiv.addEventListener('DOMMouseScroll', fn, false);
		}
		function fn(ev) {
			var ev = ev || event;
			var height = $('#slide-hook').height();
			var sHeight = $(window).height();
			var isScrollTop = height - sHeight
			var b = true;
			
			if (ev.wheelDelta) {
				b = ev.wheelDelta > 0 ? true : false;
			} else {
				b = ev.detail < 0 ? true : false;
			}
			
			if ( b ) {
				settingObj.elScrollTop+=50
				if (settingObj.elScrollTop > 0) {
					settingObj.elScrollTop = 0
				}
				this.style.transform = 'translate3d(.1px,' + settingObj.elScrollTop + 'px,.1px)';
				this.style.webkitTransform = 'translate3d(.1px,' + settingObj.elScrollTop + 'px,.1px)';
			} else {
				settingObj.elScrollTop-=50
				let n = Math.abs(settingObj.elScrollTop)
				if (n >= isScrollTop) {
					settingObj.elScrollTop = -isScrollTop
				}
				this.style.transform = 'translate3d(.1px,' + settingObj.elScrollTop + 'px,.1px)';
				this.style.webkitTransform = 'translate3d(.1px,' + settingObj.elScrollTop + 'px,.1px)';
			}
			
			if (ev.preventDefault) {
				ev.preventDefault(); 
			}
			
			return false;
			
		}
		
		waterfallHook.onmousewheel = fn2;
		
		if (waterfallHook.addEventListener) {
			waterfallHook.addEventListener('DOMMouseScroll', fn2, false);
		}
		function fn2(ev) {
			var ev = ev || event;
			var height = window.sessionStorage.getItem('isWaterfall');
			var sHeight = $(window).height() - $('#search-hook').height();
			var isScrollTop = height - sHeight
			var b = true;
			
			if (ev.wheelDelta) {
				b = ev.wheelDelta > 0 ? true : false;
			} else {
				b = ev.detail < 0 ? true : false;
			}
			
			if ( b ) {
				settingObj.waterfallScrollTop+=80
				if (settingObj.waterfallScrollTop > 0) {
					settingObj.waterfallScrollTop = 0
				}
				this.style.transform = 'translate3d(.1px,' + settingObj.waterfallScrollTop + 'px,.1px)';
				this.style.webkitTransform = 'translate3d(.1px,' + settingObj.waterfallScrollTop + 'px,.1px)';
			} else {
				settingObj.waterfallScrollTop-=80
				let n = Math.abs(settingObj.waterfallScrollTop)
				if (n >= isScrollTop) {
					settingObj.waterfallScrollTop = -isScrollTop 
					let url;
					if (settingObj.catalogId) {
						url = 'doutu/picture/list'
					} else {
						url = 'doutu/picture/listIndex'
					}
					_ajax({
						url: url,
						data: {pageNum: settingObj.pageNum++,pageSize: 16, catalogId: settingObj.catalogId}
					}, (msg) => {
						$(msg).each(function(index,obj) {
							vm.dataList.push(obj)
						})
					})
					return false
				}
				this.style.transform = 'translate3d(.1px,' + settingObj.waterfallScrollTop + 'px,.1px)';
				this.style.webkitTransform = 'translate3d(.1px,' + settingObj.waterfallScrollTop + 'px,.1px)';
			}
			
			if (ev.preventDefault) {
				ev.preventDefault(); 
			}
			
			return false;
		}
	})
}